<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>报废分析--${site.name}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="${site.description}"/>
    <meta name="keywords" content="${site.keywords}"/>
    <meta name="author" content="${site.author}"/>
    <link rel="icon" href="${site.logo}">
    <link rel="stylesheet" href="${base}/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
    <link rel="stylesheet" href="${base}/static/css/user.css" media="all" />
</head>
<body class="childrenBody">
<br><br>
<!-- 右边内容 -->
       <div style="width:50%;height: calc(46vh);margin:0 auto;float:left;">
         <div id="main" style="height:100%;"></div>
        </div>
            <div style="width:50%;height: calc(46vh);margin:0 auto;float:right;">
           <div id="main2" style="height:100%;"></div>
          </div>
             <fieldset class="layui-elem-field">
          <div style="width:80%;height: calc(46vh);margin:0 auto;float:left;">
         <div id="main3" style="height:100%;"></div>
        </div>     
             <div style="width:20%;height: calc(46vh);margin:0 auto;float:right;padding-top:4%;">    
                  <#list ThereScrap as Scrap>      
                     <div >	
                                 <button type="button" onclick="check('${Scrap.weeks}')"class="layui-btn layui-btn-xs" >
                                      ${Scrap.weeks}
                               </button>                  									
				     </div>   
				     </#list>      				            
             </div>   
</fieldset> 

                            
                  

 <script type="text/javascript" src="${base}/static/echarts/echarts.min.js"></script>
 <script type="text/javascript" src="${base}/static/jquery-easyui-1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
<script type="text/javascript" src="${base}/static/js/tools.js"></script>

  <script type="text/javascript">
  function check(scrapProject){
  	$.ajax({
  		url:'analysisUpdate',
  		dataType:'json',
  		type:'post',
  		data:{scrapProject:scrapProject},
  		success:function(data){	
  			setOption_DeatialScrap(getDeatialWeek(data.NumTenScrap),getDeatialInput(data.NumTenScrap),getDeatialScrap(data.NumTenScrap),getDeatialScrapRate(data.NumTenScrap),scrapProject);
  		}
  	});

  }
  
//打开的时候获取后台数据 
 $(document).ready(function(){
  	startRequest(); 	
  });  

  function startRequest(){
  	$.ajax({
  		url:'analysis',
  		dataType:'json',
  		type:'post',
  		success:function(data){	
  			setOption_DeatialScrap(getDeatialWeek(data.NumTenScrap),getDeatialInput(data.NumTenScrap),getDeatialScrap(data.NumTenScrap),getDeatialScrapRate(data.NumTenScrap),"Impact/Dent"); 			
  			setOption_SummaryScrap(getSummaryWeek(data.DeatialScrap),getSummary(data.DeatialScrap));
  			setOption_ThereScrap(getThereWeek(data.ThereScrap),getThere(data.ThereScrap));
  		}
  	});
  }
  
  // 每月报废方法——————————————————————————————————————————————————————————————————————————
  function getDeatialWeek(data){
  	key=[];
  	for(var i=0;i<data.length;i++){
  		key[i] = "w"+data[i].weeks.substring(4);
  	}
  	return key ;
  }
  
  function getDeatialInput(data){
  	key=[];
  	for(var i=0;i<data.length;i++){
  		    key[i] = data[i].input;
  	}

  	return key ;
  }
  
  function getDeatialScrap(data){ 	
  	key=[];
  	for(var i=0;i<data.length;i++){
  		     key[i] = data[i].scrap;
   }
  	return key ;
  }
  
  function getDeatialScrapRate(data){ 	
  	key=[];
  	for(var i=0;i<data.length;i++){		
   		    key[i] = (((data[i].scrap) / (data[i].input))*100).toFixed(2);
  	}
  	return key ;
  }

  
      var DeatialmyChart = echarts.init(document.getElementById('main3'));
      function setOption_DeatialScrap(week,Input,scrap,rate,ScrapProject){		
      	 option = {
        		   title: {
                       text: 'Finial Inspection:'+ScrapProject
                   },
        	    tooltip: {
        	        trigger: 'axis',
        	        axisPointer: {
        	            type: 'cross',
        	            crossStyle: {
        	                color: '#999'
        	            }
        	        }
        	    },
        	    toolbox: {
        	        feature: {
        	            dataView: {show: true, readOnly: false},
        	            magicType: {show: true, type: ['line', 'bar']},
        	            restore: {show: true},
        	            saveAsImage: {show: true}
        	        }
        	    },
        	    legend: {
        	        data: ['scrap', 'Input', 'Scrap rate']
        	    },
        	    xAxis: [
        	        {
        	            type: 'category',
        	            data: week,
        	            axisPointer: {
        	                type: 'shadow'
        	            }
        	        }
        	    ],
        	    yAxis: [
        	        {
        	            type: 'value',
        	            name: 'Input Qty',
        	            min: 0,
        	            max: 100000,
        	            interval: 10000,
        	            axisLabel: {
        	                formatter: '{value}'
        	            }
        	        },
        	        {
        	            type: 'value',
        	            name: 'Scrap Rate',
        	            min: 0,
        	            max: 2,
        	            interval: 0.2,
        	            axisLabel: {
        	                formatter: '{value}%'
        	            }
        	        }
        	    ],
        	    series: [
        	        {
        	            name: 'Scrap',
        	            type: 'bar',
        	            data: scrap
        	        },
        	        {
        	            name: 'Input',
        	            type: 'bar',
        	            data: Input
        	        },
        	        {
        	            name: 'Scrap rate',
        	            type: 'line',
        	            yAxisIndex: 1,
        	            data: rate
        	        }
        	    ]
        	};
      DeatialmyChart.setOption(option);
      }
  
  // 一个月报废统计——————————————————————————————————————————————————————————————————————————
  function getThereWeek(data){
     	key=[];
     	for(var i=0;i<data.length;i++){
          if (data[i].weeks !="Input/投入数" & data[i].weeks !="Others"){
          	if (i<9){
     		         key[i] = "'"+data[i].weeks+"'";
          	}
      	}
     	}
     	return key ;
     }
  
  function getThere(data){ 	
     	key=[];
     	for(var i=0;i<data.length;i++){	
          if (data[i].weeks !="Input/投入数" & data[i].weeks !="Others"){
          	if (i<9){
     		            var dic = new Object();
     	                dic.value = data[i].scrap;
     	                dic.name = data[i].weeks;
     	                 key[i]=dic;
          	}   
        	}        
     	}
     	return key ;
     }
  
function setOption_ThereScrap(week,scrap){	
    var TheremyChart = echarts.init(document.getElementById('main2'));
  option = {
  	    title: {
              text: 'Finial Inspection Scrap Detail/ One Month',
  	        left: 'center'
  	    },
  	    tooltip: {
  	        trigger: 'item',
  	        formatter: '{a} <br/>{b} : {c} ({d}%)'
  	    },
  	    legend: {
  	        orient: 'vertical',
  	        left: 'left',
  	        data: week
  	    },
  	    series: [
  	        {
  	            name: 'Scrap Qty',
  	            type: 'pie',
  	            radius: '65%',
  	            center: ['50%', '60%'],
  	             data:scrap,
  	            emphasis: {
  	                itemStyle: {
  	                    shadowBlur: 10,
  	                    shadowOffsetX: 0,
  	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
  	                }
  	            }
  	        }
  	    ]
 	};
  TheremyChart.setOption(option);
  }
  
  
  
  // 上周报废统计——————————————————————————————————————————————————————————————————————————
  function getSummaryWeek(data){
     	key=[];
     	for(var i=0;i<data.length;i++){
          if (data[i].weeks !="Input/投入数" & data[i].weeks !="Others"){
          	if (i<9){
     		         key[i] = "'"+data[i].weeks+"'";
          	}
      	}
     	}
     	return key ;
     }
  
  function getSummary(data){ 	
     	key=[];

     	for(var i=0;i<data.length;i++){	
          if (data[i].weeks !="Input/投入数" & data[i].weeks !="Others"){
          	if (i<9){
     		            var dic = new Object();
     	                dic.value = data[i].scrap;
     	                dic.name = data[i].weeks;
     	                 key[i]=dic;
          	}   
        	}        
     	}
     	return key ;
     }
  
function setOption_SummaryScrap(week,scrap){	
    var SummarymyChart = echarts.init(document.getElementById('main'));
  option = {
  	    title: {
              text: 'Finial Inspection Scrap Detail/ Last week',
  	        left: 'center'
  	    },
  	    tooltip: {
  	        trigger: 'item',
  	        formatter: '{a} <br/>{b} : {c} ({d}%)'
  	    },
  	    legend: {
  	        orient: 'vertical',
  	        left: 'left',
  	        data: week
  	    },
  	    series: [
  	        {
  	            name: 'Scrap Qty',
  	            type: 'pie',
  	            radius: '65%',
  	            center: ['50%', '60%'],
  	             data:scrap,
  	            emphasis: {
  	                itemStyle: {
  	                    shadowBlur: 10,
  	                    shadowOffsetX: 0,
  	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
  	                }
  	            }
  	        }
  	    ]
 	};
  SummarymyChart.setOption(option);
  }
       
    </script>

</body>
</html>